import React, { Component } from 'react'
import {BrowserRouter as Router, Link,NavLink,Route,Switch} from 'react-router-dom';
import { Layout, Menu ,Tag , Input, Tooltip } from 'antd';
import Home from "../views/home.js"
import User from "../views/user.js"
import Address from "../views/address.js"
import GoodsCreate from "../views/goodsCreate.js"
import "../static/css/sidebar.css"
import {
    BankFilled,
    SignalFilled,
    EyeFilled,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    LogoutOutlined,
} from '@ant-design/icons';
import "../static/css/home.css"

const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;

const arr = [
    {
        id:3,
        name:"nihoaa"
    }
]


export default  class sidebar extends Component{
    rootSubmenuKeys=[]
    constructor(props) {
        super(props);
        this.state = {
             MenuConfig :[
                {
                    title:'首页',
                    key:'/sidebar/home'
                },
                {
                    title:'用户管理',
                    key:'/userManagement',
                    children:[
                        {
                            title: '会员管理',
                            key: '/userManagement/user',
                        },
                        {
                            title: '地址管理',
                            key: '/userManagement/address',
                        },
                        {
                            title: '商品管理',
                            key: '/userManagement/goodsCreate',
                        },
                        {
                            title: '通知提醒',
                            key: '/userManagement/notification',
                        },
                        {
                            title: '全局Message',
                            key: '/userManagement/messages',
                        },
                        {
                            title: 'Tab页签',
                            key: '/userManagement/tabs',
                        },
                        {
                            title: '图片画廊',
                            key: '/userManagement/gallery',
                        },
                    ]
                },
                {
                    title:'表单',
                    key:'/from',
                    children: [
                        {
                            title: '登录',
                            key: '/form/login',
                        },
                        {
                            title: '注册',
                            key: '/form/reg',
                        }
                    ]
                },
                {
                    title:'表格',
                    key:'/table',
                    children: [
                        {
                            title: '基础表格',
                            key: '/table/basic',
                        },
                        {
                            title: '高级表格',
                            key: '/table/high',
                        }
                    ]
                },
                {
                    title:'富文本',
                    key:'/rich'
                },
                {
                    title:'城市管理',
                    key:'/city'
                },
                {
                    title:'订单管理',
                    key:'/order',
                    btnList: [
                        {
                            title: '订单详情',
                            key: 'detail'
                        },
                        {
                            title: '结束订单',
                            key: 'finish'
                        }
                    ]
                },
                {
                    title:'员工管理',
                    key:'/user'
                },
                {
                    title:'车辆地图',
                    key:'/bikeMap'
                },
                {
                    title:'图标',
                    key:'/charts',
                    children: [
                        {
                            title: '柱形图',
                            key: '/charts/bar'
                        },
                        {
                            title: '饼图',
                            key: '/charts/pie'
                        },
                        {
                            title: '折线图',
                            key: '/charts/line'
                        },
                    ]
                },
                {
                    title: '权限设置',
                    key: '/permission'
                },
            ],
            openKeys: [],
            selectedKeys: [],
            collapsed: false,
            tagsdata:[
                {
                   title:"首页",
                   link:"/sidebar/home",
                   type:1,
                    id:1,
                }
            ],
            inputVisible: false,
            inputValue: '',
            editInputIndex: -1,
            editInputValue: '',
        };

    }
    //导航标签的关闭
    handleClose = removedTag => {
        if(removedTag.link ==this.props.location.pathname){
            var length = this.state.tagsdata.length
            var linkval = this.state.tagsdata[length-2].link
            this.navlink(linkval)
        }
        const tagsdata = this.state.tagsdata.filter(tag => tag !== removedTag);
        console.log(tagsdata);
        this.setState({ tagsdata });
    };
    //导航标签的添加
    NavConfirm = (inputValue,link,id) => {
        let { tagsdata } = this.state;
        for (var i = 0; i < tagsdata.length; i++) {
            tagsdata[i].type = 0
        }
        for (var i = 0; i < tagsdata.length; i++) {
            if( inputValue == tagsdata[i].title){
                tagsdata[i].type = 1
                return false
            }
        }
        tagsdata = [...tagsdata, {title:inputValue,link:link,type:1,id:id}];
        console.log(tagsdata);
        this.setState({
            tagsdata,
        });
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    //导航标签的跳转
    navlink = (value) =>{
        switch(value) {
            case "/sidebar/home":
                this.NavConfirm("首页","/sidebar/home",1)
                this.props.history.push('/sidebar/home')
                this.setState({
                    selectedKeys:['/sidebar/home'],
                })
                break;
            case "/sidebar/user":
                this.NavConfirm("用户","/sidebar/user",2)
                this.props.history.push('/sidebar/user')
                this.setState({
                    selectedKeys:['/userManagement/user'],
                    openKeys:['/userManagement'],
                })
                break;
            case '/sidebar/address':
                this.NavConfirm("地址管理",'/sidebar/address',3)
                this.props.history.push('/sidebar/address')
                this.setState({
                    selectedKeys:['/userManagement/address'],
                    openKeys:['/userManagement'],
                })

                break;
            case '/sidebar/goodsCreate':
                this.NavConfirm("商品管理",'/sidebar/goodsCreate',4)
                this.props.history.push('/sidebar/goodsCreate')
                this.setState({
                    selectedKeys:['/userManagement/goodsCreate'],
                    openKeys:['/userManagement'],
                })
                break;
            default:
                break;
        }

    };
    //侧标导航的跳转等操作
    handleClick = e => {
        switch(e.key) {
            case '/sidebar/home':
                this.NavConfirm("首页","/sidebar/home",1)
                this.props.history.push('/sidebar/home')
                this.setState({
                    selectedKeys:['/sidebar/home'],
                })
                break;
            case "/userManagement/user":
                this.NavConfirm("用户","/sidebar/user",2)
                this.props.history.push('/sidebar/user')
                this.setState({
                    selectedKeys:['/userManagement/user'],
                    openKeys:['/userManagement'],
                })
                break;
            case  '/userManagement/address':
                this.NavConfirm("地址管理",'/sidebar/address',3)
                this.props.history.push('/sidebar/address')
                this.setState({
                    selectedKeys:['/userManagement/address'],
                    openKeys:['/userManagement'],
                })
                break;
            case "/userManagement/goodsCreate":
                this.NavConfirm("商品管理",'/sidebar/goodsCreate',4)
                this.props.history.push('/sidebar/goodsCreate')
                this.setState({
                    selectedKeys:['/userManagement/goodsCreate'],
                    openKeys:['/userManagement'],
                })
                break;
            default:
                break;
        }
    };
    //侧边导航的展开、合并
    onOpenChange = (k) => {
        console.log(k)
        if(k.length>0){
            var data =k[k.length-1]
            this.setState({openKeys:[data]});
        }else{
            this.setState({ openKeys:[],});
        }
    };
    // 点击时切换展开项
    onOpenChange = (openKeys) => {
        const latestOpenKey = openKeys.find(key =>
            this.state.openKeys.indexOf(key) === -1
        );
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            this.setState({ openKeys });
        } else {
            this.setState({
                openKeys: latestOpenKey ? [latestOpenKey] : [],
            });
        }
    }
    // 左边导航栏渲染（原理，通过递归的方式进行渲染）
    renderMenu = (data)=>{
        return data.map((item)=>{
            if(item.children){//当有子集存在的时候，需要再次调用遍历
                this.rootSubmenuKeys.push(item.key)
                return (
                    <SubMenu title={
                        <span>
                            <SignalFilled />
                            <span>{item.title}</span>
                        </span>
                    } key={item.key}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
            return (
                <Menu.Item title={item.title} key={item.key}>
                    <BankFilled />
                    <span>{item.title}</span>
                </Menu.Item>
            )
        })
    }
    componentWillMount(){
        //列表数据的渲染
        const menuTreeNode = this.renderMenu(this.state.MenuConfig);
        this.setState({
            menuTreeNode:menuTreeNode
        })
        //---默认选中初始值的设置---
        // 获取当前路径
        const pathname = this.props.location.pathname
        //获取当前所在的目录层级
        switch (pathname) {
            case "/sidebar/home":
                this.setState({
                    selectedKeys:['/sidebar/home']
                })
                break;
            case "/sidebar/user":
                this.NavConfirm("用户","/sidebar/user",2)
                this.setState({
                    openKeys:['/userManagement'],
                    selectedKeys:['/userManagement/user']
                })
                break;
            case '/sidebar/address':
                this.NavConfirm("地址管理",'/sidebar/address',3)
                this.setState({
                    openKeys:['/userManagement'],
                    selectedKeys:['/userManagement/address']
                })
                break;
            case '/sidebar/goodsCreate':
                this.NavConfirm("商品管理",'/sidebar/goodsCreate',4)
                this.setState({
                    openKeys:['/userManagement'],
                    selectedKeys:['/userManagement/goodsCreate']
                })
                break;
            default:
                break;

        }
        //---默认选中初始值的设置---结束---
    }
    componentDidMount() {

    };

    render(){
        const {tagsdata} = this.state;
        console.log(tagsdata)
            return (
            <div>
                <Layout style={{minHeight:'100vh'}}>
                    <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                        <Menu
                            theme='dark'
                            mode="inline"
                            openKeys={this.state.openKeys}
                            selectedKeys={this.state.selectedKeys}
                            onOpenChange={this.onOpenChange}
                            onClick={this.handleClick}
                        >
                            {this.state.menuTreeNode}
                        </Menu>
                    </Sider>
                    <Layout className="site-layout">
                        <Header className="site-layout-background">
                           <div className="navtop">
                               {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                   className: 'trigger',
                                   onClick: this.toggle,
                               })}
                               &nbsp; &nbsp; &nbsp; &nbsp;首页
                               <Link to="/sign" className="fr cursor-pointer">退出 &nbsp; <LogoutOutlined /></Link>
                           </div>
                            <div className="navbottom">
                                <div>
                                    {tagsdata.map((tag, index) => {
                                        const isLongTag = tag.title.length > 6;
                                        const tagElem = (
                                            <Tag
                                                icon={<EyeFilled />}
                                                color={tag.type===1?"#42b983":"#d9d9d9"}
                                                className="edit-tag"
                                                key={tag.id}
                                                closable={tag.type !== 1}
                                                onClose={() => this.handleClose(tag)}
                                            >
                                                <span onClick={this.navlink.bind(this,tag.link)}>
                                                    {isLongTag ? `${tag.title.slice(0, 6)}...` : tag.title}
                                                </span>
                                            </Tag>
                                        );
                                        return isLongTag ? (
                                            <Tooltip title={tag.title} key={tag}>
                                                {tagElem}
                                            </Tooltip>
                                        ) : (
                                            tagElem
                                        );
                                    })}
                                </div>
                            </div>
                        </Header>
                        <Content
                            className="site-layout-background"
                            style={{
                                padding: 20,
                                minHeight: 280,
                                background: "#fff"
                            }}
                        >
                            <Switch>
                                <Route path="/sidebar/home"  component={Home} />
                                {/*<Route path="/sidebar/user" component={User} />*/}
                                <Route  path="/sidebar/user"
                                       render={props => (
                                           <User {...props} getChildValue={this.childValue}  />
                                       )}
                                />
                                <Route path="/sidebar/address" component={Address} />
                                <Route path="/sidebar/goodsCreate" component={GoodsCreate} />
                            </Switch>
                        </Content>
                    </Layout>
                </Layout>




            </div>
        )
    }

}
